<template>
  <div class="detailData">
    <baseData :baseData="indexData" @modifyPopup="handleModifyPopup"></baseData>
    <detailEcharts :xAxisData="xAxisData" :seriesData="seriesData" v-if="operation === 'drill'"></detailEcharts>
    <detailList :fields="fields" :dataContent="dataContent" @getTrendItem="handleTrendItem"></detailList>
  </div>
</template>

<script>
import baseData from './baseData'
import detailEcharts from './detailEcharts'
import detailList from './detailList'
import { get } from 'lodash'
export default {
  props: ['data', 'operation'],
  components: {
    baseData,
    detailList,
    detailEcharts
  },
  data() {
    return {
      baseData: {},
      fields: [
        {
          code: 'orgBranchName'
        },
        {
          code: 'orgBranchvalue'
        }
      ],
      indexData: [],
      dataContent: [],
      echartsContent: [],
      xAxisData: [],
      seriesData: []
    }
  },
  methods: {
    handleTrendItem(data, overlapingItem, filterData) {
      // 获取单个列表信息
      this.$emit('getIndex', data, overlapingItem, filterData)
    },
    handleModifyPopup(isPopup) {
      this.$emit('indexModifyPopup', isPopup)
    }
  },
  watch: {
    data(val) {
      const baseData = get(val, 'data', {})
      const fields = get(val, 'fields', [])
      const indexData = get(val, 'indexData', [])
      const dataContent = get(baseData, 'content', [])
      this.baseData = baseData
      this.fields = fields
      this.indexData = indexData
      this.dataContent = dataContent
      for (let i = 0; i < this.fields.length; i++) {
        for (let j = 0; j < this.dataContent.length; j++) {
          this.echartsContent.push(this.dataContent[j][this.fields[i].code])
        }
      }
      this.xAxisData = this.echartsContent.slice(0, this.dataContent.length)
      this.seriesData = this.echartsContent.slice(this.dataContent.length)
      console.log(val, 'val')
    }
  }
}
</script>

<style lang="scss" scoped>
.detailData {
  width: 335px;
  margin: 0px auto;
  border-radius: 12px;
  background-color: #192264;
  padding: 0px 20px;
}
</style>
